<!DOCTYPE HTML>
<html lang="en">
	<head>
		<title>Ray collision test</title>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="css/webgl/style.css">
	</head>
	
	<body>

		<div id="infobutton">
			<a href="javascript:toggleInfo()"><img src="images/webgl/i.png" border="0"></a>
		</div>
		<div id="info">
				<B>Ray collision test - WebGL(html5)</B><BR>
				Arrowkeys to move. Space to jump.
				<P>A test to do some sort of collision checking. By shooting a ray and see if it hits a mesh.<BR>It's probably a stupid/ineffective way of doing this, don't know how these things are<BR>usually dealt with when it comes to 3d.</P>
				Done using <a href="https://github.com/mrdoob/three.js" target="_blank">three.js</a>.
				<P><B>Note.</B> You need a modern browser that supports WebGL for this to run the way it is intended.<BR>
				For example. <a href="http://www.google.com/landing/chrome/beta/" target="_blank">Google Chrome 9+</a> or <a href="http://www.mozilla.com/firefox/beta/" target="_blank">Firefox 4+</a>.</P>
				<font color="#777777">(C) OutsideOfSociety 2010.
		</div>

		<script type="text/javascript" src="js/threejs/ThreeE.js"></script>

		<script type="text/javascript" src="js/room/keys.js"></script>

		<script type="text/javascript" src="js/threejs/RequestAnimationFrame.js"></script>
		<script type="text/javascript" src="js/threejs/Stats.js"></script>
		<script type="text/javascript" src="js/room/info.js"></script>


		<script type="text/javascript">

			var SCREEN_WIDTH = window.innerWidth;
			var SCREEN_HEIGHT = window.innerHeight;
			var FLOOR = -250;

			var container;
			var stats;

			var camera;
			var scene;
			var webglRenderer;

			var mesh, zmesh, lightMesh, geometry;
			
			var directionalLight, pointLight;
			
			var mouseX = 0;
			var mouseY = 0;

			var windowHalfX = window.innerWidth >> 1;
			var windowHalfY = window.innerHeight >> 1;

			var render_gl = 1;
			var has_gl = 0;
			
			var cubeRefMesh;
			var collideMesh;

			var r = 0;
			
			var gravity = 1;
			var yspeed = 0;
			var onGround = true;

			var halfSize=0;
			var theta = 45;
			var isShiftDown=false,isCtrlDown=false;
			
			var mouse2D= new THREE.Vector3( 0, 0, 0);
			init(), animate();
				
			
				
			

			function addMesh( geometry, scale, x, y, z, rx, ry, rz, material,name ) {
						geometry.computeBoundingBox();
						
						
		
				mesh = new THREE.Mesh( geometry, material );
				mesh.scale.x = mesh.scale.y = mesh.scale.z = scale;
				mesh.position.x = x;
				mesh.position.y = y;
				mesh.position.z = z;
				mesh.rotation.x = rx;
				mesh.rotation.y = ry;
				mesh.rotation.z = rz;
				mesh.overdraw = true;
				mesh.doubleSided = false;
				mesh.name=name;
				mesh.size=geometry.boundingBox.max.subSelf(geometry.boundingBox.min);
				mesh.updateMatrix();


				scene.add(mesh);
				
				return mesh;
			
			}
			
			function init() {

				container = document.createElement('div');
				document.body.appendChild(container);
				
				var aspect = SCREEN_WIDTH / SCREEN_HEIGHT;

				camera = new THREE.Camera( 75, aspect, 1, 100000 );
				camera.position.z = 600;
				camera.position.x = 0;
				camera.position.y = 200;

				camera.updateMatrix();

				scene = new THREE.Scene();

				// LIGHTS

				var ambient = new THREE.AmbientLight( 0x101010 );
				scene.add( ambient );

				directionalLight = new THREE.DirectionalLight( 0xffffff, 1.0 );
				directionalLight.position.x = 1;
				directionalLight.position.y = 1;
				directionalLight.position.z = 2;
				directionalLight.position.normalize();
				scene.add( directionalLight );

				pointLight = new THREE.PointLight( 0x666666 );
				pointLight.position.x = 0;
				pointLight.position.y = 0;
				pointLight.position.z = 0;
				scene.add( pointLight );
				
				var cubeRef = new THREE.CubeGeometry( 200, 200, 200, 1, 1 );

				cubeRefMesh = addMesh( cubeRef, 1,  -300, FLOOR+50, 0, 0,0,0, new THREE.MeshLambertMaterial( { color: 0x112345 } ) );
				cubeRefMesh.geometry.computeBoundingBox();
				halfSize = cubeRefMesh.geometry.boundingBox.max.subSelf(cubeRefMesh.geometry.boundingBox.min).x/2;
				cubeRefMesh.name='cubeRefMesh';
				camera.target = cubeRefMesh;

				var collideCube = new THREE.CubeGeometry( 20, 20, 20, 1, 1 );
				collideMesh = addMesh( collideCube, 1,  -300, FLOOR+5000, 0, 0,0,0, new THREE.MeshLambertMaterial( { color: 0xAA2312 } ) );
				collideMesh.name='collideMesh';
				var cube = new THREE.CubeGeometry( 300, 300, 300, 1, 1 );
				var cube2 = new THREE.CubeGeometry( 800, 400, 400, 1, 1 );
				addMesh( cube2, 1,  0, FLOOR+150+80, 0, 0,0,0, getMaterial(),'cubeTest');
				addMesh( cube, 1,  300, FLOOR+150+300, 0, 0,1.57,0, getMaterial(),'cube1' );
				addMesh( cube, 1,  600, FLOOR+150+600, 0, 0,1.57,0, getMaterial(),'cube2' );

				addMesh( cube, 1,  0, FLOOR+150, -1500, 0,1.57,0, getMaterial(),'cube3' );
				addMesh( cube, 1,  -600, FLOOR+150, -1500, 0,1.57,0, getMaterial(),'cube4' );
				addMesh( cube, 1,  -1200, FLOOR+150+300, -1500, 0,1.57,0, getMaterial(true),'cube5' );

				addMesh( cube, 1,  0, FLOOR+150, -2100, 0,1.57,0, getMaterial() );

				// plane = new THREE.PlaneGeometry( 100, 100, 15, 10 );
// 				
				// for(var i=0; i<plane.faceUvs.length; i++) {
					// var uvs = plane.faceUvs[i];
					// for ( j = 0, jl = uvs.length; j < jl; j++ ) {
						// uvs[j].u *= 10;
						// uvs[j].v *= 10;
					// }
// 					
				// }
// 
				// addMesh( plane, 100,  0, FLOOR, 0, -1.57,0,0, getFloorMaterial() ,'plane');
				
								plane = new THREE.CubeGeometry( 2000, 2,2000 );
				planeMat=new THREE.MeshBasicMaterial( { color: 0xC0C0C0 } ) ;
				addMesh( plane, 1, 0, FLOOR, 0, 0, 0, 0, planeMat,"background" );
				

				try {
					webglRenderer = new THREE.WebGLRenderer( scene );
					webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
					container.appendChild( webglRenderer.domElement );
					has_gl = 1;
				}
				catch (e) {
					// need webgl
					document.getElementById('info').innerHTML = "<P><BR><B>Note.</B> You need a modern browser that supports WebGL for this to run the way it is intended.<BR>For example. <a href='http://www.google.com/landing/chrome/beta/' target='_blank'>Google Chrome 9+</a> or <a href='http://www.mozilla.com/firefox/beta/' target='_blank'>Firefox 4+</a>.</P><CENTER><BR><img src='../general/WebGL_logo.png' border='0'></CENTER>";
					document.getElementById('info').style.display = "block";
					return;
				}

				// this.build4Walls(roomStyles);
			  //left wall;
	          cubeGeo=new THREE.CubeGeometry(200,200,20);
	          // addMesh( geometry, scale, x, y, z, rx, ry, rz, material,name );
	          addMesh( cubeGeo, 1,  -200, 100, 400, 0,0,0, getMaterial(),'cube');
	          
	          // cubeGeo.computeBoundingBox();
	          // cubeMaterial = new THREE.MeshLambertMaterial( { color:0x066666, opacity: 1, shading: THREE.FlatShading } );
	          // cube=new THREE.Mesh(cubeGeo,cubeMaterial);
	          // cube.position.z=Number(400);
	          // // plane.position.z=Number(roomStyles[i].top);
	          // cube.position.x=Number(0)-200/2+20/4;
	          // cube.position.y=200/2;
	          // cube.name='wall';
	          // cube.size=cubeGeo.boundingBox.max.subSelf(cubeGeo.boundingBox.min);
	          // // cube.rotation.x = - 90 * Math.PI / 180;
	          // scene.add(cube);
	          
	
	          // //right wall;
	          // cubeGeo=new THREE.CubeGeometry(20/2,200,Number(roomStyles[i].depth));
	          // cubeGeo.computeBoundingBox();
	          // cubeMaterial = new THREE.MeshLambertMaterial( { color: 0x00ff80, opacity: 1,shading: THREE.FlatShading } );
	          // cube=new THREE.Mesh(cubeGeo,cubeMaterial);
	          // cube.position.z=Number(roomStyles[i].left);
	          // // plane.position.z=Number(roomStyles[i].top);
	          // cube.position.x=Number(roomStyles[i].top)+Number(roomStyles[i].width)/2-20/4;
	          // cube.position.y=200/2;
	          // cube.name='wall';
	          // // cube.rotation.x = - 90 * Math.PI / 180;
	          // scene.add(cube);
	          // // this.colliders.push( THREE.CollisionUtils.MeshOBB(cube) );
// 	          
	          // //front wall;
	          // cubeGeo=new THREE.CubeGeometry(Number(roomStyles[i].width),20/2,200);
	          // cubeGeo.computeBoundingBox();
	          // cubeMaterial = new THREE.MeshLambertMaterial( { color: 0x00ff80, opacity: 1, shading: THREE.FlatShading } );
	          // cube=new THREE.Mesh(cubeGeo,cubeMaterial);
	          // cube.position.x=Number(roomStyles[i].top);
	          // // plane.position.z=Number(roomStyles[i].top);
	          // cube.position.z=Number(roomStyles[i].left)-Number(roomStyles[i].depth)/2+20/4;
	          // cube.position.y=200/2;
	          // cube.rotation.x = - 90 * Math.PI / 180;
	          // cube.name='wall';
	          // scene.add(cube);
	          // // this.colliders.push( THREE.CollisionUtils.MeshOBB(cube) );
// 	          
	          // //back wall;
	          // cubeGeo=new THREE.CubeGeometry(Number(roomStyles[i].width),20/2,200);
	          // cubeGeo.computeBoundingBox();
	          // cubeMaterial = new THREE.MeshLambertMaterial( { color: 0x00ff80, opacity: 1, shading: THREE.FlatShading } );
	          // cube=new THREE.Mesh(cubeGeo,cubeMaterial);
	          // cube.position.x=Number(roomStyles[i].top);
	          // // plane.position.z=Number(roomStyles[i].top);
	          // cube.position.z=Number(roomStyles[i].left)+Number(roomStyles[i].depth)/2-20/4;
	          // cube.position.y=200/2;
	          // cube.rotation.x = - 90 * Math.PI / 180;
	          // cube.name='wall';
	          // scene.add(cube);
// 	          
			// //celling;
	          // cubeGeo=new THREE.CubeGeometry(200,100,200);
	          // cubeGeo.computeBoundingBox();
	          // cubeMaterial = new THREE.MeshLambertMaterial( { color: 0x00ff80, opacity: 1, shading: THREE.FlatShading } );
	          // cube=new THREE.Mesh(cubeGeo,cubeMaterial);
	          // cube.position.x=Number(roomStyles[i].top);
	          // // plane.position.z=Number(roomStyles[i].top);
	          // cube.position.z=Number(roomStyles[i].left)+Number(roomStyles[i].depth)/2-20/4+60;
	          // cube.position.y=40;
	          // // cube.rotation.x = - 90 * Math.PI / 180;
	          // cube.name='wall';
	          // scene.add(cube);
	          
				stats = new Stats();
				stats.domElement.style.position = 'absolute';
				stats.domElement.style.top = '0px';
				stats.domElement.style.zIndex = 100;
				container.appendChild( stats.domElement );
				
				document.addEventListener( 'click', function(event){click(event);}, false );
				document.addEventListener('keyup',function(event){
					switch( event.keyCode ) {
						case 16: isShiftDown = false; break;
						case 17: isCtrlDown = false; break;

					}
				});
				document.addEventListener('keydown',function(event){
					switch( event.keyCode ) {
						case 16: isShiftDown = true; break;
						case 17: isCtrlDown = true; break;

					}
				});
			}
			
			function click(event){
				event.preventDefault();
				mouse2D.x = ( event.clientX / SCREEN_WIDTH ) * 2 - 1;
				mouse2D.y = - ( event.clientY / SCREEN_HEIGHT  ) * 2 + 1;
				setTimeout("locate(mouse2D)",0);
			}
			
			function locate(event){
				// event.preventDefault();

				console.warn(mouse2D);
				projector = new THREE.Projector();
				mouse3D = projector.unprojectVector( mouse2D.clone(), camera );
				ray = projector.pickingRay(mouse2D.clone(),camera );
        		var intersects = ray.intersectScene( scene );
						 	    if ( intersects.length > 0 ) {
					      intersector = getRealIntersector( intersects,plane );
						          	if ( intersector ) {
						        
						                  var ctrPosition=cubeRefMesh.position;
						                  var ctrSize=100;
						                  var tchPoint=intersector.point;
						                  var tchPosition=intersector.object.position;
						                  var targetPoint=new THREE.Vector3();
						                  var interSize=intersector.object.size;
						                  if(interSize.x/2-Math.abs(tchPoint.x-tchPosition.x)<.15){
						                      tchPoint.x=Math.floor( tchPoint.x / interSize.x ) * interSize.x + interSize.x/2;
						                      if(tchPoint.x>tchPosition.x){
						                      	targetPoint.x=tchPoint.x+ctrSize;
						                        keyRight=false;
						                        keyLeft=true;
						                      }
						                      else{
						                      	targetPoint.x=tchPoint.x-ctrSize;
												keyRight=true;
						                        keyLeft=false;
						                      }
											  targetPoint.y=tchPoint.y;
                                    		targetPoint.z=tchPoint.z;
						                  }
			                              if(interSize.z/2-Math.abs(tchPoint.z-tchPosition.z)<.15){
			                                  tchPoint.z=Math.floor( tchPoint.z / interSize.z ) * interSize.z + interSize.z/2;
			                                  if(tchPoint.z>tchPosition.z)              {
			                                  	targetPoint.z=tchPoint.z+ctrSize;
			                                  	keyDown=false;
			                                  	keyUp=true;
			                                  }                  
			                                    
			                                  else{
			                                  	targetPoint.z=tchPoint.z-ctrSize;
												keyDown=true;
			                                  	keyUp=false;
			                                  }
			                                    
			                                    
			                                    targetPoint.y=tchPoint.y;
			                                    targetPoint.x=tchPoint.x;
			                              }
			                              if(interSize.y/2-Math.abs(tchPoint.y-tchPosition.y)<.15){
			                                  tchPoint.y=Math.floor( tchPoint.y / interSize.y ) * interSize.y + interSize.y/2;
			                                  if(tchPoint.y>tchPosition.y){
			                                    targetPoint.y=tchPoint.y+ctrSize;
			                                    yspeed=-1;
			                                  }                                
			                                    
			                                  else{
			                                    targetPoint.y=tchPoint.y-ctrSize;
			                                    yspeed=1;
			                                  }
			                                    
			                                    
			                                    targetPoint.x=tchPoint.x;
			                                    targetPoint.z=tchPoint.z;
			                              }  
			                              // if(interSize.y/2-Math.abs(tchPoint.y-tchPosition.y)>.15&&
			                              // 	 interSize.x/2-Math.abs(tchPoint.x-tchPosition.x)>.15&&
			                              // 	 interSize.z/2-Math.abs(tchPoint.z-tchPosition.z)>.15){
			                              //       targetPoint.y=tchPoint.y;			                                    
			                              //       targetPoint.x=tchPoint.x;
			                              //       targetPoint.z=tchPoint.z;	
			                              //       console.warn(interSize.x/2-Math.abs(tchPoint.x-tchPosition.x)); 
			                              //       console.warn(interSize.y/2-Math.abs(tchPoint.y-tchPosition.y)); 		
			                              //       console.warn(interSize.z/2-Math.abs(tchPoint.z-tchPosition.z));                              	 	
			                              // 	 }                            
						                  cubeRefMesh.position.copy(targetPoint);
						                  
                         }     
						        }
				
        
			}
			  function  getRealIntersector(intersects,flat){
            var isInObj=false;
            for( i = 0; i < intersects.length; i++ ) {
            intersector = intersects[ i ];
              return intersector;
            }
            return null;
      }
			function getMaterial (qmark) {
				  var texturePainting =null;
				  if(qmark){
				     texturePainting = THREE.ImageUtils.loadTexture( "images/webgl/qmark1.png", THREE.UVMapping);  
				  }else{
				    texturePainting = THREE.ImageUtils.loadTexture( "images/webgl/rock.png", THREE.UVMapping); 
				  }
				  imageTextureMaterial = new THREE.MeshBasicMaterial( { color: 0xffffff, map: texturePainting } );
          return imageTextureMaterial;
          
			}


			function getFloorMaterial () {
        
		        var texturePainting =null;
		        texturePainting = THREE.ImageUtils.loadTexture( "images/webgl/grid.png", THREE.UVMapping, THREE.RepeatWrapping, THREE.RepeatWrapping); 
		        floorTextureMaterial = new THREE.MeshBasicMaterial( { color: 0xffffff, map: texturePainting } );
		        return floorTextureMaterial;
			}

			function control() {
				var speed = 10;
				
				// var halfSize=100;
				var nearHalfSize = halfSize-5;

				// if (keyUp) {
					// cubeRefMesh.position.z -= speed;
				// }
				// if (keyDown) {
					// cubeRefMesh.position.z += speed;
				// }
				// if (keyLeft) {
					// cubeRefMesh.position.x -= speed;
				// }
				// if (keyRight) {
					// cubeRefMesh.position.x += speed;
				// }
				if (keySpace && onGround) {
					yspeed = 30;
					onGround = false;
				}
			
				collideMesh.position.y = 6000;
				
				onGround = false;
				// y
				// yspeed -= gravity;
				// cubeRefMesh.position.y += yspeed;
				
				var down_vector = new THREE.Vector3( 0, -1, 0 );
				var up_vector = new THREE.Vector3( 0, 1, 0 );

				var bl = new THREE.Vector3( cubeRefMesh.position.x-halfSize, cubeRefMesh.position.y, cubeRefMesh.position.z-halfSize );
				var br = new THREE.Vector3( cubeRefMesh.position.x+halfSize, cubeRefMesh.position.y, cubeRefMesh.position.z-halfSize );
				var fl = new THREE.Vector3( cubeRefMesh.position.x-halfSize, cubeRefMesh.position.y, cubeRefMesh.position.z+halfSize );
				var fr = new THREE.Vector3( cubeRefMesh.position.x+halfSize, cubeRefMesh.position.y, cubeRefMesh.position.z+halfSize );
				
				// down
				if (yspeed < 0) {
					// bl
					var bl_ray = new THREE.Ray( bl, down_vector );
					var bl_intersects = bl_ray.intersectScene( scene );
					if ( bl_intersects.length > 0 && bl_intersects[0].distance < halfSize ) {
						cubeRefMesh.position.y = bl_intersects[0].point.y+halfSize;
						onGround = true;
					}
					// br
					var br_ray = new THREE.Ray( br, down_vector );
					var br_intersects = br_ray.intersectScene( scene );
					if ( br_intersects.length > 0 && br_intersects[0].distance < halfSize ) {
						cubeRefMesh.position.y = br_intersects[0].point.y+halfSize;
						onGround = true;
					}
					// fl
					var fl_ray = new THREE.Ray( fl, down_vector );
					var fl_intersects = fl_ray.intersectScene( scene );
					if ( fl_intersects.length > 0 && fl_intersects[0].distance < halfSize ) {
						cubeRefMesh.position.y = fl_intersects[0].point.y+halfSize;
						onGround = true;
					}	
					// fr
					var fr_ray = new THREE.Ray( fr, down_vector );
					var fr_intersects = fr_ray.intersectScene( scene );
					if ( fr_intersects.length > 0 && fr_intersects[0].distance < halfSize ) {
						cubeRefMesh.position.y = fr_intersects[0].point.y+halfSize;
						onGround = true;
					}	
				}
				// // up
				if (yspeed > 0) {
					// bl
					var bl_ray = new THREE.Ray( bl, up_vector );
					var bl_intersects = bl_ray.intersectScene( scene );
					if ( bl_intersects.length > 0 && bl_intersects[0].distance < halfSize ) {
						cubeRefMesh.position.y = bl_intersects[0].point.y-halfSize;
						yspeed = 0;
					}
					// br
					var br_ray = new THREE.Ray( br, up_vector );
					var br_intersects = br_ray.intersectScene( scene );
					if ( br_intersects.length > 0 && br_intersects[0].distance < halfSize ) {
						cubeRefMesh.position.y = br_intersects[0].point.y-halfSize;
						yspeed = 0;
					}
					// fl
					var fl_ray = new THREE.Ray( fl, up_vector );
					var fl_intersects = fl_ray.intersectScene( scene );
					if ( fl_intersects.length > 0 && fl_intersects[0].distance < halfSize ) {
						cubeRefMesh.position.y = fl_intersects[0].point.y-halfSize;
						yspeed = 0;
					}	
					// fr
					var fr_ray = new THREE.Ray( fr, up_vector );
					var fr_intersects = fr_ray.intersectScene( scene );
					if ( fr_intersects.length > 0 && fr_intersects[0].distance < halfSize ) {
						cubeRefMesh.position.y = fr_intersects[0].point.y-halfSize;
						yspeed = 0;
					}	
				}

				cubeRefMesh.updateMatrix();

				// // ray
				// var f_vector = new THREE.Vector3( 0, 0, -1 );
				// var b_vector = new THREE.Vector3( 0, 0, 1 );
				// var l_vector = new THREE.Vector3( -1, 0, 0 );
				// var r_vector = new THREE.Vector3( 1, 0, 0 );
// 
				// var left = new THREE.Vector3( cubeRefMesh.position.x-halfSize, cubeRefMesh.position.y-nearHalfSize, cubeRefMesh.position.z );
				// var right = new THREE.Vector3( cubeRefMesh.position.x+halfSize, cubeRefMesh.position.y-nearHalfSize, cubeRefMesh.position.z );
				// var front = new THREE.Vector3( cubeRefMesh.position.x, cubeRefMesh.position.y-nearHalfSize, cubeRefMesh.position.z+halfSize );
				// var back = new THREE.Vector3( cubeRefMesh.position.x, cubeRefMesh.position.y-nearHalfSize, cubeRefMesh.position.z-halfSize );
// 				
				// // front
				// if (keyUp) {
					// var left_ray = new THREE.Ray( left, f_vector );
					// var left_intersects = left_ray.intersectScene( scene );
					// if ( left_intersects.length > 0 && left_intersects[0].distance < halfSize ) {
						// cubeRefMesh.position.z = left_intersects[0].point.z+halfSize+1;
					// }
					// var right_ray = new THREE.Ray( right, f_vector );
					// var right_intersects = right_ray.intersectScene( scene );
					// if ( right_intersects.length > 0 && right_intersects[0].distance < halfSize ) {
						// cubeRefMesh.position.z = right_intersects[0].point.z+halfSize+1;
					// }
				// }
				// // back
				// if (keyDown) {
					// var left_ray = new THREE.Ray( left, b_vector );
					// var left_intersects = left_ray.intersectScene( scene );
					// if ( left_intersects.length > 0 && left_intersects[0].distance < halfSize ) {
						// cubeRefMesh.position.z = left_intersects[0].point.z-halfSize-1;
					// }
					// var right_ray = new THREE.Ray( right, b_vector );
					// var right_intersects = right_ray.intersectScene( scene );
					// if ( right_intersects.length > 0 && right_intersects[0].distance < halfSize ) {
						// cubeRefMesh.position.z = right_intersects[0].point.z-halfSize-1;
					// }
				// }				
				// // right
				// if (keyRight) {
					// var back_ray = new THREE.Ray( back, r_vector );
					// var back_intersects = back_ray.intersectScene( scene );
					// if ( back_intersects.length > 0 && back_intersects[0].distance < halfSize ) {
						// cubeRefMesh.position.x = back_intersects[0].point.x-halfSize-1;
					// }
					// var front_ray = new THREE.Ray( front, r_vector );
					// var front_intersects = front_ray.intersectScene( scene );
					// if ( front_intersects.length > 0 && front_intersects[0].distance < halfSize ) {
						// cubeRefMesh.position.x = front_intersects[0].point.x-halfSize-1;
					// }
				// }
				// // left
				// if (keyLeft) {
					// var back_ray = new THREE.Ray( back, l_vector );
					// var back_intersects = back_ray.intersectScene( scene );
					// if ( back_intersects.length > 0 && back_intersects[0].distance < halfSize ) {
						// cubeRefMesh.position.x = back_intersects[0].point.x+halfSize+1;
					// }
					// var front_ray = new THREE.Ray( front, l_vector );
					// var front_intersects = front_ray.intersectScene( scene );
					// if ( front_intersects.length > 0 && front_intersects[0].distance < halfSize ) {
						// cubeRefMesh.position.x = front_intersects[0].point.x+halfSize+1;
					// }
				// }
				// cubeRefMesh.updateMatrix();
				collideMesh.position.y += 100;
			}

			function animate() {
				requestAnimationFrame( animate );
				loop();
			}

			function loop() {
				control();

				// camera.position.x = 0+cubeRefMesh.position.x-(cubeRefMesh.position.x/5);//200*Math.cos(r);
				// camera.position.y = 200+cubeRefMesh.position.y;
				// camera.position.z = cubeRefMesh.position.z+600;
				
								if ( isShiftDown ) {

					theta += mouse2D.x * 3;

				}
				
				if(isCtrlDown){
					theta += mouse2D.x * 3;
					camera.position.y = 1400 * Math.cos( theta * Math.PI / 360 );
				}
				camera.position.x = 1400 * Math.sin( theta * Math.PI / 360 );
				camera.position.z = 1400 * Math.cos( theta * Math.PI / 360 );
				camera.lookAt( cubeRefMesh );
				
				pointLight.position.x = 1000*Math.cos(r);
				pointLight.position.z = 1000*Math.sin(r);

				r += 0.01;
				
				if ( render_gl && has_gl ) webglRenderer.render( scene, camera );

				stats.update();

			}


		</script>

	</body>
</html>
